<template>
  <view class="unlock-box" :style="{ pointerEvents }" @click="() => false">
    <text style="font-size: 18px; font-weight: bold; color: #ffffff">解锁后继续看</text>
    <text style="margin-top: 15px; font-size: 12px; font-weight: bold; color: #999999">{{ `《${title}》第${currEpisodeIndex + 1}集` }}</text>
    <mxp-button
      width="160px"
      :loading="loading"
      :disabled="loading"
      :cusStyle="{ marginTop: '20px', pointerEvents: 'auto' }"
      text="立即解锁"
      color="#fff"
      background="#ef2c60"
      loadingText="立即解锁"
      @click="() => emits('unlock')"
    ></mxp-button>
  </view>
</template>

<script setup lang="ts">
  import MxpButton from '@/mxp-ui/mxp-button/mxp-button.vue';
  import type { PropType } from 'vue';

  defineOptions({
    name: 'unlock-module',
  });

  defineProps({
    /** 是否加载中 */
    loading: { type: Boolean, default: true },
    /** 标题 */
    title: { type: String, default: '' },
    /** 当前集数 */
    currEpisodeIndex: { type: Number, default: 1 },
    /** 事件穿透 */
    pointerEvents: { type: String as PropType<'auto' | 'none'>, default: 'none' },
  });

  const emits = defineEmits<{
    (e: 'unlock'): void;
  }>();
</script>

<style lang="scss" scoped>
  .unlock-box {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
</style>
